<template>
	<view class="options">
		<view 
		class="listitem" 
		v-for="item,index in list" 
		:key="index"
		:class="{
            actived: checked === index && (isexam || !answer?.length),
			corrent: ((item.isCorrect === true && item.isUserAnswer === true) || item.isCorrect === true),
			error: item.isUserAnswer === true && item.isCorrect === false,
			shake: item.isUserAnswer === true && item.isCorrect === false && !shake,
        }"  
		@click="clickFun(item.prefix,index, item)">
			<view class="number">
				<!-- <image class="img" v-if="(item.isCorrect === true && item.isUserAnswer === true) || item.isCorrect === true" :src="`${imgPath}png/pic6.png`"></image>
				<image class="img" v-else-if="item.isUserAnswer === true && item.isCorrect === false" :src="`${imgPath}png/pic7.png`"></image>
				<template v-else>{{item.prefix}}</template> -->
				<uni-icons v-if="(item.isCorrect === true && item.isUserAnswer === true) || item.isCorrect === true" color="#fff" type="checkmarkempty" size="32rpx"></uni-icons>
				<uni-icons v-else-if="item.isUserAnswer === true && item.isCorrect === false" color="#fff" type="closeempty" size="32rpx"></uni-icons>
				<template v-else>{{item.prefix}}</template>
			</view>
			
			<view class="font min-w-0">
				<view>{{ item.content }}</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import tools from '@/utils';
import { ref,watch, onBeforeUnmount } from 'vue';
const props = defineProps({
    list: {
        type: Array
    },
    answer: {
        type: [Array, Object]
    },
    rightAnswer: {
        type: Array
    },
    isexam: {
        type: Boolean,
		default: true
    },
	isclick: {
		type: Boolean,
		default: true
	},
	shake: {
		type: Boolean,
		default: false
	},
	play: {
		type: Boolean,
		default: false
	}
})

/** pity mp3 */
const getPityMp3 = () => {
	let playSrc = '';
	
	// #ifdef MP-WEIXIN
	playSrc = 'https://yypx-1325749220.cos.ap-guangzhou.myqcloud.com/app/pity.mp3';
	// #endif
	
	// #ifdef APP-PLUS
	playSrc = '../../../static/audio/pity.mp3';
	// #endif
	
	uni.useAudio.src(playSrc);
};

/** success mp3 */
const getSuccessMp3 = () => {
	let playSrc = '';
	
	playSrc = 'https://assets-1315727392.cos.ap-chongqing.myqcloud.com/YIYUAN/mp3/59f0493363e12.mp3';
	
	uni.useAudio.src(playSrc);
};

const emit = defineEmits(['takeFun', 'previewAudio', 'on-play'])

const checked = ref()
const clickFun = (item,index, _item) => {
	if (props.answer?.length) return;
	
	if(!props.isclick){
		return false
	}
	console.log(props)
    if(props.isexam){
    	checked.value = index
    }
    let obj = {
    	answer: [item]
    }
    setTimeout(() => {
    	emit('takeFun', obj)
    }, 100)
}

const isOutPage = ref(false);
onBeforeUnmount(() => {
	isOutPage.value = true;
});

watch(
    () => props.answer, (newVal, oldVal) => {
        if(props.isexam){
			if(newVal?.length){
				props.list.forEach((item,index) => {
					if(newVal.indexOf(item.prefix) > -1){
						checked.value = index
					}
				})
			} else{
				checked.value = null
			}
		} else{
			newVal?.length ? checkAnswer(newVal, props.rightAnswer, props.list) : checked.value = null
		}
		console.log('组件内的监听：', newVal, checked.value)
    }, {
        immediate: true,
        deep: true
    }
)


function checkAnswer(answer, rightAnswer, options, not) {
    options.forEach((option) => {
        const isUserAnswer = answer.includes(option.prefix);
        const isCorrectAnswer = rightAnswer.includes(option.prefix);
        option.isCorrect = isCorrectAnswer;
        option.isUserAnswer = isUserAnswer;
    });

    rightAnswer.forEach((prefix) => {
        const option = options.find((option) => option.prefix === prefix);
        if (!option) {
            options.push({ prefix, isCorrect: false, isUserAnswer: false });
        }
    });
	
	if (props.shake || isOutPage.value || props.play) return;
	console.log('props', props);
	console.log('组件输出：', answer, rightAnswer, options)
	if(tools.aryEqual(rightAnswer, answer)){
		console.log('播放正确')
		getSuccessMp3()
	} else{
		console.log('播放错误')
		getPityMp3()
	}
	
	emit('on-play')
}


</script>

<style scoped lang="scss">
	@import url('./style.scss');
	.shake{animation: shake 800ms ease-in-out;transform-style: preserve-3d}
	
	 @keyframes shake{
		10%,90%{transform: translate3d(-1px, 0, 0)}
		20%,80%{transform: translate3d(+2px, 0, 0)}
		30%,70%{transform: translate3d(-4px, 0, 0)}
		40%,60%{transform: translate3d(+4px, 0, 0)}
		50%{transform: translate3d(-4px, 0, 0)}
	}
</style>